<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="format-detection" content="telephone=no">
    <title>游戏中心 - JS小游戏集合</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
            touch-action: manipulation;
        }

        body {
            font-family: 'arial', sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            color: #333;
            overflow-x: hidden;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            overflow: visible;
        }

        .header {
            text-align: center;
            margin-bottom: 40px;
            padding: 30px 0;
        }

        .header h1 {
            color: white;
            font-size: 3rem;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
            animation: glow 2s ease-in-out infinite alternate;
        }

        .header p {
            color: rgba(255,255,255,0.9);
            font-size: 1.2rem;
            margin-bottom: 20px;
        }

        @keyframes glow {
            from { text-shadow: 2px 2px 4px rgba(0,0,0,0.3), 0 0 10px rgba(255,255,255,0.3); }
            to { text-shadow: 2px 2px 4px rgba(0,0,0,0.3), 0 0 20px rgba(255,255,255,0.5); }
        }

        .games-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 25px;
            margin-bottom: 40px;
        }

        .game-card {
            background: rgba(255,255,255,0.95);
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 8px 25px rgba(0,0,0,0.15);
            transition: all 0.3s ease;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .game-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
            transition: left 0.5s;
        }

        .game-card:hover::before {
            left: 100%;
        }

        .game-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(0,0,0,0.2);
        }

        .game-card:active {
            transform: translateY(-2px) scale(0.98);
        }

        .game-card:focus {
            outline: none;
        }

        .game-icon {
            font-size: 3rem;
            margin-bottom: 15px;
            text-align: center;
        }

        .game-title {
            font-size: 1.5rem;
            font-weight: bold;
            margin-bottom: 10px;
            color: #2c3e50;
            text-align: center;
        }

        .game-description {
            color: #666;
            line-height: 1.6;
            margin-bottom: 15px;
            text-align: center;
        }

        .play-btn {
            display: block;
            width: 100%;
            padding: 12px;
            background: linear-gradient(45deg, #667eea, #764ba2);
            color: white;
            text-decoration: none;
            border-radius: 8px;
            text-align: center;
            font-weight: bold;
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
            font-size: 1rem;
        }

        .play-btn:hover {
            background: linear-gradient(45deg, #5a6fd8, #6a4190);
            transform: translateY(-2px);
        }

        .play-btn:active {
            transform: translateY(0) scale(0.95);
        }

        .play-btn:focus {
            outline: none;
        }

        .footer {
            text-align: center;
            padding: 30px 0;
            color: rgba(255,255,255,0.8);
        }

        .stats {
            background: rgba(255,255,255,0.1);
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 30px;
            text-align: center;
        }

        .stats h3 {
            color: white;
            margin-bottom: 15px;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 15px;
        }

        .stat-item {
            background: rgba(255,255,255,0.2);
            padding: 15px;
            border-radius: 8px;
        }

        .stat-number {
            font-size: 2rem;
            font-weight: bold;
            color: white;
        }

        .stat-label {
            color: rgba(255,255,255,0.9);
            font-size: 0.9rem;
        }

        /* 移动端适配 - 增强版 */
        @media (max-width: 768px) {
            body {
                overflow-x: hidden;
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
            }
            
            .container {
                padding: 15px;
                overflow: visible;
            }
            
            .header h1 {
                font-size: 2.5rem;
            }
            
            .header p {
                font-size: 1rem;
            }
            
            .games-grid {
                grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
                gap: 20px;
            }
            
            .game-card {
                padding: 20px;
            }
        }

        @media (max-width: 480px) {
            body {
                overflow-x: hidden;
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
            }
            
            .stats-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 10px;
            }
            
            .stat-item {
                padding: 12px;
            }
            
            .stat-number {
                font-size: 1.8rem;
            }
            
            .stat-label {
                font-size: 0.8rem;
            }
            .header h1 {
                font-size: 2rem;
            }
            
            .games-grid {
                grid-template-columns: 1fr;
                gap: 15px;
            }
            
            .game-card {
                padding: 15px;
            }
            
            .game-title {
                font-size: 1.3rem;
            }
            
            .stats-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 320px) {
            body {
                overflow-x: hidden;
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
            }
            
            .container {
                padding: 8px;
            }
            
            .header {
                padding: 15px 0;
            }
            
            .header h1 {
                font-size: 1.6rem;
            }
            
            .header p {
                font-size: 0.9rem;
            }
            
            .game-card {
                padding: 10px;
            }
            
            .game-icon {
                font-size: 2.2rem;
                margin-bottom: 10px;
            }
            
            .game-title {
                font-size: 1.1rem;
                margin-bottom: 8px;
            }
            
            .game-description {
                font-size: 0.8rem;
                line-height: 1.4;
                margin-bottom: 12px;
            }
            
            .play-btn {
                padding: 10px;
                font-size: 0.9rem;
            }
            
            .stats {
                padding: 15px;
                margin-bottom: 20px;
            }
            
            .stats h3 {
                font-size: 1.1rem;
                margin-bottom: 10px;
            }
            
            .stats-grid {
                grid-template-columns: 1fr;
                gap: 8px;
            }
            
            .stat-item {
                padding: 10px;
            }
            
            .stat-number {
                font-size: 1.5rem;
            }
            
            .stat-label {
                font-size: 0.75rem;
            }
            
            .footer {
                padding: 20px 0;
            }
            
            .footer p {
                font-size: 0.8rem;
            }
        }
        
        /* 横屏模式优化 */
        @media (max-width: 768px) and (orientation: landscape) {
            .header {
                padding: 20px 0;
                margin-bottom: 20px;
            }
            
            .header h1 {
                font-size: 2rem;
            }
            
            .games-grid {
                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
                gap: 15px;
            }
            
            .game-card {
                padding: 15px;
            }
            
            .game-icon {
                font-size: 2.2rem;
                margin-bottom: 10px;
            }
            
            .game-title {
                font-size: 1.2rem;
            }
            
            .game-description {
                font-size: 0.85rem;
                margin-bottom: 12px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🎮 游戏中心</h1>
            <p>欢迎来到JS小游戏集合！这里有各种有趣的小游戏等你来挑战</p>
        </div>

        <div class="stats">
            <h3>📊 游戏统计</h3>
            <div class="stats-grid">
                <div class="stat-item">
                    <div class="stat-number">10</div>
                    <div class="stat-label">游戏总数</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number">6</div>
                    <div class="stat-label">休闲游戏</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number">3</div>
                    <div class="stat-label">益智游戏</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number">1</div>
                    <div class="stat-label">音乐游戏</div>
                </div>
            </div>
        </div>

        <div class="games-grid">
            <div class="game-card" onclick="window.location.href='whack-a-mole-game.html'">
                <div class="game-icon">🔨</div>
                <div class="game-title">打地鼠</div>
                <div class="game-description">经典打地鼠游戏，考验你的反应速度和手眼协调能力！</div>
                <button class="play-btn">开始游戏</button>
            </div>

            <div class="game-card" onclick="window.location.href='screw-king-game.html'">
                <div class="game-icon">🔧</div>
                <div class="game-title">无敌螺丝王</div>
                <div class="game-description">策略性螺丝消除游戏，需要思考和规划每一步操作！</div>
                <button class="play-btn">开始游戏</button>
            </div>

            <div class="game-card" onclick="window.location.href='game2048.html'">
                <div class="game-icon">🔢</div>
                <div class="game-title">2048</div>
                <div class="game-description">经典的数字合成游戏，挑战你的逻辑思维能力！</div>
                <button class="play-btn">开始游戏</button>
            </div>

            <div class="game-card" onclick="window.location.href='snake.html'">
                <div class="game-icon">🐍</div>
                <div class="game-title">贪吃蛇</div>
                <div class="game-description">经典贪吃蛇游戏，控制小蛇吃食物并避免撞墙！</div>
                <button class="play-btn">开始游戏</button>
            </div>

            <div class="game-card" onclick="window.location.href='piano.html'">
                <div class="game-icon">🎹</div>
                <div class="game-title">钢琴游戏</div>
                <div class="game-description">在线钢琴模拟器，让你随时随地弹奏美妙的音乐！</div>
                <button class="play-btn">开始游戏</button>
            </div>

            <div class="game-card" onclick="window.location.href='needle.html'">
                <div class="game-icon">📍</div>
                <div class="game-title">穿针引线</div>
                <div class="game-description">考验耐心和精准度的小游戏，挑战你的操作技巧！</div>
                <button class="play-btn">开始游戏</button>
            </div>

            <div class="game-card" onclick="window.location.href='life-simulator.html'">
                <div class="game-icon">🌟</div>
                <div class="game-title">人生模拟器</div>
                <div class="game-description">体验不同的人生选择，探索各种可能性！</div>
                <button class="play-btn">开始游戏</button>
            </div>

            <div class="game-card" onclick="window.location.href='fk-h5.html'">
                <div class="game-icon">🎯</div>
                <div class="game-title">FK小游戏</div>
                <div class="game-description">有趣的休闲小游戏，轻松娱乐打发时间！</div>
                <button class="play-btn">开始游戏</button>
            </div>

                <div class="game-card" onclick="window.location.href='caizi-h5.html'">
                <div class="game-icon">🔤</div>
                <div class="game-title">猜字小游戏</div>
                <div class="game-description">猜字小游戏，猜中字母即可得分！</div>
                <button class="play-btn">开始游戏</button>
            </div>

            <div class="game-card" onclick="window.location.href='guess-number-game.html'">
                <div class="game-icon">🎲</div>
                <div class="game-title">掷骰子游戏</div>
                <div class="game-description">经典掷骰子游戏，考验你的运气和统计能力！</div>
                <button class="play-btn">开始游戏</button>
            </div>
        </div>

        <div class="footer">
            <p>💡 提示：所有游戏都支持移动端，随时随地享受游戏乐趣！</p>
            <p>© 2025 AI 生成的JS小游戏集合 | 用Ai制作每一个小游戏</p>
        </div>
    </div>

    <script>
        // 添加页面加载动画
        document.addEventListener('DOMContentLoaded', function() {
            const cards = document.querySelectorAll('.game-card');
            cards.forEach((card, index) => {
                card.style.opacity = '0';
                card.style.transform = 'translateY(20px)';
                card.style.transition = 'all 0.5s ease';
                
                setTimeout(() => {
                    card.style.opacity = '1';
                    card.style.transform = 'translateY(0)';
                }, index * 100);
            });
        });

        // 增强的触摸反馈
        document.querySelectorAll('.game-card, .play-btn').forEach(element => {
            element.addEventListener('touchstart', function(e) {
                // 只为游戏卡片和按钮添加触摸反馈，不阻止默认行为
                this.style.transform = 'scale(0.95)';
                setTimeout(() => {
                    this.style.transform = '';
                }, 150);
            }, { passive: true });
            
            // 添加触摸结束事件
            element.addEventListener('touchend', function(e) {
                this.style.transform = '';
            }, { passive: true });
        });
        
        // 防止iOS橡皮筋效果，但不影响正常滚动
        let startY = 0;
        document.body.addEventListener('touchstart', function(e) {
            startY = e.touches[0].pageY;
        }, { passive: true });
        
        document.body.addEventListener('touchmove', function(e) {
            const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
            const scrollHeight = document.documentElement.scrollHeight;
            const clientHeight = document.documentElement.clientHeight;
            
            // 只在顶部和底部边界时阻止橡皮筋效果
            if ((scrollTop <= 0 && e.touches[0].pageY > startY) || 
                (scrollTop + clientHeight >= scrollHeight && e.touches[0].pageY < startY)) {
                e.preventDefault();
            }
        }, { passive: false });
        
        // 优化移动端点击体验
        if ('ontouchstart' in window) {
            document.querySelectorAll('.game-card, .play-btn').forEach(element => {
                element.addEventListener('click', function(e) {
                    // 获取onclick属性中的链接
                    const onclickAttr = this.getAttribute('onclick');
                    if (onclickAttr) {
                        const match = onclickAttr.match(/'([^']+)'/);
                        if (match && match[1]) {
                            e.preventDefault();
                            // 添加触摸反馈后跳转
                            this.style.transform = 'scale(0.95)';
                            setTimeout(() => {
                                window.location.href = match[1];
                            }, 150);
                        }
                    }
                });
            });
        }
    </script>
</body>
</html>